<template>
    <div class="secondTopWrapper">
        <div class="leftWrapper">
            <div class="logoImageWrapper" @click="handleGoHome()">
                <img :src="logoImg" alt="">
            </div>
            <div class="directionWrapper">
                <!-- 菜单层 -->
                <div class="menuWrapper">
                    <div class="menuMiddle">
                        <div class="menuAll">
                        <div @mouseover="getShowMenuOver()" @mouseout="getShowMenuOut()" class="menuTemp">
                            <div class="menuItemOne">
                            <div><span>API分类导航</span></div>
                            <div><i class='icon iconfont icon-mulu' style="font-size: 22px"></i></div>
                            </div>
                            <!-- 左侧菜单绝对定位 -->
                            <div class="classificationSecond">
                                <div class="classificationItem" v-if="showMenu" v-for="item in classifiction" :key="item.name" :class="{active: item.name === selectedClassfication}" @mouseover="getCategory(item.name)" @mouseout="getCategoryOut()">
                                    <div class="classficationTitle">
                                    {{item.type}}
                                    </div>
                                    <div class="classficationIcon">
                                    <i class='icon iconfont icon-dayu' style="font-size: 22px"></i>
                                    </div>
                                    <!-- 菜单右边div -->
                                    <div class="rightContent" v-if="selectedClassfication === item.name">
                                    <div class="rightTitle">
                                        <i class='icon iconfont icon-shenghuoxinxi' style="font-size: 22px"></i>
                                        <span>{{item.title}}</span>
                                    </div>
                                    <!-- 菜单具体分类实例 -->
                                    <div class="rightCategory">
                                        <ul class="ulWrapper">
                                            <li>
                                                全国快递查询
                                            </li>
                                            <li>
                                                天气预报
                                            </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="middleWrapper">
            <div class="search">
                <div class="searchLeft">
                    <el-input placeholder="请输入内容" v-model="inputContent" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
        </div>
        <div class="rightWrapper">
            <div class="topMiddleRight">
                <ul class="ulWrapper">
                    <li class="liItem liItemOne"><i class='icon iconfont icon-QQ'></i><span>联系客服</span></li>
                    <li class="liItem" style="color: #ED6D00" @click="handleGoRegeister()">立即注册</li>
                    <li class="liItem">退出</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import logoImg from '@/assets/logo.jpg'
export default {
  name: 'Top',
  data () {
    return {
      logoImg,
      inputContent: '',
      selectedClassfication: '',
      showMenu: false,
      classifiction: []
    }
  },
  created () {
    this.handleLeftMenu()
  },
  methods: {
    // 获取导航菜单目录
    handleLeftMenu () {
      this.$http.get('/v1/category/getCategoryWidthNode').then(result => {
        if (result.data.code === 200) {
          this.classifiction = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: errMsg,
          type: 'error'
        })
      })
    },
    getShowMenuOver () {
      if (this.ifShowMenu) {
        this.showMenu = false
      } else {
        this.showMenu = true
      }
    },
    getShowMenuOut () {
      this.showMenu = false
    },
    getCategory (name) {
      this.selectedClassfication = name
    },
    getCategoryOut () {
      this.selectedClassfication = ''
    },
    handleGoRegeister () {
      this.$router.push('/regeister')
    },
    handleGoHome () {
      this.$router.push('/myhome')
    }
  }
}
</script>

<style lang='less' scoped>
.secondTopWrapper {
    display: flex;
    .leftWrapper {
        display: flex;
        width: 33%;
        .logoImageWrapper {
            cursor: pointer;
            margin-left: 20px;
            margin-top: 9px;
            img {
                width: 56px;
                height: 35px;
            }
        }
        .directionWrapper {
            .menuWrapper {
                background-color: #fff;
                .menuMiddle {
                    width: 1200px;
                    margin: 0 auto;
                    .menuAll {
                    position: relative;
                    display: flex;
                    padding-left: 3px;
                    padding-right: 3px;
                    .menuTemp {
                        width: 23%;
                        .menuItemOne {
                        line-height: 30px;
                        padding: 10px 20px;
                        color: white;
                        font-size: 22px;
                        height: 30px;
                        display: flex;
                        justify-content: space-between;
                        background-color: #ED6D00;
                        margin-right: 30px;
                    }
                    .classificationSecond {
                        z-index: 5;
                        position: absolute;
                        width: 245px;
                        color: white;
                        font-weight: bold;
                        font-size: 14px;
                        background-color: #3D4B4F;
                        top: 50px;
                        .classificationItem {
                            padding: 20px 20px;
                            border-bottom: 1px solid #475357;
                            display: flex;
                            justify-content: space-between;
                            &:hover{
                            background-color: #fff;
                            color: #ED6D00;
                            border-left: 1px solid #ED6D00;
                            }
                            &:last-child:hover {
                            border-bottom: 1px solid #ED6D00;
                            }
                            .rightContent {
                            border: 1px solid #ED6D00;
                            border-left: 1px solid white;
                            position: absolute;
                            color: #666;
                            left: 243px;
                            top: 0px;
                            padding: 20px 20px;
                            width: 800px;
                            background-color: #fff;
                            height: 218px;
                            .rightTitle {
                                border-bottom: 1px solid #E4E4E4;
                                padding-bottom: 20px;
                                font-size: 20px;
                            }
                            .rightCategory {
                                .ulWrapper {
                                padding: 10px 20px;
                                display: flex;
                                justify-content: space-between;
                                li:hover {
                                    color: #FF8A00;
                                }
                                }
                            }
                            }
                        }
                        }
                    }
                    }
                }
                }
        }
    }
    .middleWrapper {
        width: 33%;
        .search {
            margin-top: 5px;
            display: flex;
            .searchLeft {
                width: 90%;
            }
        }
    }
    .rightWrapper {
        width: 33%;
        .topMiddleRight {
            margin-top: 12px;
            position: fixed;
            right: 30px;
            padding: 5px 2px;
            .ulWrapper {
                display: flex;
                text-align: right;
                list-style: none;
                .liItemOne {
                    i {
                        margin-right: -15px;
                        color: #999;
                    }
                }
                .liItem {
                    cursor: pointer;
                    margin-left: 30px;
                    color: #999;
                    font-size: 13px;
                }
            }
        }
    }
}
</style>
